{extend name="extra@admin/content"}

{block name="content"}
<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="__SELF__" data-auto="true" method="post">

    <div id="optionContainer">
        {if !isset($vo.num)}
        <div class="layui-form-item">
            <label class="layui-form-label">选择分类</label>
            <div class="layui-input-block">
                {volist name='cat' id='voo'}
                <input type="radio" name="cat" value="{$voo.id}" title="{$voo.title}" lay-filter="cat">
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择商品</label>
            <div class="layui-input-block">
                <select name="goods_id" lay-verify="" lay-search id="select_id">
                    <option value="">选择或搜索</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择属性</label>
            <div class="layui-input-block" id="spec">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-block" id="logo" style="width:100px;height:100px;">

            </div>
        </div>
        {/if}
        <div class="layui-form-item">
            <label class="layui-form-label">订货数量</label>
            <div class="layui-input-block">
                <input required type="text" autofocus name="num" value="{$vo.num|default=''}"
                       pattern="^[1-9]*[1-9][0-9]*$" title="请输入订货数量" placeholder="请输入订货数量" class="layui-input">
            </div>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'/>{/if}
        <button class="layui-btn" type='submit'>保存数据</button>
        <!--<a class="layui-btn" href="javascript:;" onclick="check_form();" style="text-underline: none;color:#fff;">保存数据</a>-->
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
    <script>window.form.render();</script>

    <script>
        layui.use('form', function () {
            var form = layui.form;

            //各种基于事件的操作
            form.on('select', function (data) {
//                console.log(data.elem); //得到select原始DOM对象
//                console.log(data.value); //得到被选中的值
//                console.log(data.othis); //得到美化后的DOM对象

                $.post("store/storegoods/spec",
                    {
                        goods_id: data.value,
                    },
                    function (data, status) {
                        if (status == 'success') {
                            if (data) {
                                var str = '';
                                $.each(data, function (index, content) {
                                    console.log(content.title);
//                                        if (content.title != null && content.title != ''){
                                    if(content.title == '' || content.title == null){
                                        var title = '无属性';
                                    }else{
                                        var title = content.title;
                                    }
                                    str += '<input type="radio" name="goods_spec_id" data-stock="'+content.stock+'" value="' + content.id + '" title="' + title + '">';
//                                        }
                                });
                                $("#spec").html(str);
                                var bianhao = $('#select_id').find("option:selected").attr("img");
                                $('#logo').html('<img src="' + bianhao + '" width="160px">');
                            }
                            form.render(); //刷新select选择框渲染
                        }
                    });
            });

            form.on('radio(cat)', function (data) {
//                console.log(data.elem); //得到radio原始DOM对象
//                console.log(data.value); //被点击的radio的value值

                $.post("store/storegoods/goods",
                    {
                        cat_id: data.value,
                    },
                    function (data, status) {
                        if (status == 'success') {
                            if (data) {
                                var str = '<option value="">选择或搜索</option>';
                                $.each(data, function (index, content) {
                                    str += "<option img='" + content.logo + "' value='" + content.id + "'>" + content.name + "</option>"
                                });
                                $("#select_id").html(str);
                            }
                            form.render('select'); //刷新select选择框渲染
                        }
                    });
            });
        });

//        /**
//         * 检查表单
//         */
//        function check_form(){
//            var stock = parseInt($('input[name=goods_spec_id]:checked').attr('data-stock'));
//            var num = parseInt($('input[name=num]').val());
//            if(num > stock){
//                layer.msg('订货数量不能超过限购数量',{icon:2,time:1500,shade: 0.1}, function(index){
//                    layer.close(index);
//                });
//                return false;
//            }else{
//                $('form').submit();
//            }
//        }

    </script>
</form>

<!--<style>
    .ibox-content{
        overflow-y: scroll;
        overflow-x: hidden;
        height: 400px;
    }
</style>-->
{/block}


